<script>
  export default {
    data() {
      return {
        active: 0,
        detail: {},
        list: [],
        barrageList: [
          { id: 100, text: '轻量' },
          { id: 101, text: '可定制的' },
          { id: 102, text: '移动端' },
          { id: 103, text: 'Vue' },
          { id: 104, text: '组件库' },
          { id: 105, text: 'VantUI' },
          { id: 106, text: '666' },
        ],
        barrageRef: null,
        videoRef: null,
        activeName: [],
        url: '',
        jx_url: ''
      }
    },
    created() {
      const { params } = useRoute()
      this.barrageRef = this.$refs.barrageRef
      this.videoRef = this.$refs.videoRef
      useFetch('/api/storage/config').then(res => {
        const data = res.data.value
        this.jx_url = data.jx_url
        this.loadVideoDetail(params.id)
      })
    },
    methods: {
      onPlay() {
        this.barrageRef.play()
      },
      onPause() {
        this.barrageRef.pause()
      },
      loadVideoDetail(id) {
        useFetch('/api/video', {query: {ac: 'detail', ids: id}}).then(res => {
          this.detail = JSON.parse(res.data.value).list[0]
          this.setSeoMeta()
          this.loadHotVideoList()
          this.url = this.detail.vod_pic
        })
      },
      loadHotVideoList() {
        useFetch('/api/video', {query: {ac: 'detail', h: 24, t: this.detail.type_id}}).then(res => {
          this.list = JSON.parse(res.data.value).list
        })
      },
      setSeoMeta() {
        useSeoMeta({
          title: this.detail.vod_name + '- 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili官方',
        })
      },
      setPlayUrl() {
        // 播放线路，可能会存在多个
        const play_lines = this.detail.vod_play_url.split('$$$')
        for(var i = 0; i < play_lines.length; i++) {
          const jishu_list = play_lines[i].split('#')
          for(var ii = 0; ii < jishu_list.length; ii++) {
            const play_info = jishu_list[ii].split('$')
            console.log(play_info)
          }
        }
      },
      play(url) {
        if(url.includes('.m3u8')) {
          url = this.jx_url + url
        }
        this.url = url
        this.$refs.playimg.style.display = 'none'
        this.$refs.playiframe.style.display = 'block'
      }
    }
  }
</script>

<template>
  <!-- Sticky 粘性布局 -->
  <van-sticky>
    <!-- 头部 -->
    <AppHeader />
    <!-- 弹幕 -->
    <van-barrage v-model="barrageList" :auto-play="false" ref="barrageRef">
      <!-- 视频 -->
      <img ref="playimg" :src="detail?.vod_pic" :alt="detail?.vod_name">
      <div ref="playiframe" class="play-class">
        <iframe id="show-iframe" frameborder="0" scrolling="yes" :src="url"></iframe>
      </div> 
    </van-barrage>
  </van-sticky>
  <van-collapse v-model="activeName">
    <van-collapse-item title="影视简介" name="1" icon="shop-o">
      <p>演员：{{ detail.vod_actor }}</p>
      <van-divider />
      简介：<p v-html="detail.vod_content"></p>
    </van-collapse-item>
  </van-collapse>
  <van-tabs v-model:active="active" type="card" swipeable animated>
    <van-tab v-for="(item, index) in detail?.vod_play_url?.split('$$$')" :key="index" :title="`线路${index+1}`">
      <van-space wrap style="margin: 15px 0 10px 20px;">
        <van-button plain type="primary" size="mini" v-for="(item2, index2) in item.split('#')" :key="index2" @click="play(item2.split('$')[1])" >{{ item2.split('$')[0] }}</van-button>
      </van-space>
    </van-tab>
  </van-tabs>
  <!-- 相关推荐 -->
  <div class="relate">
    <h3 class="relate-title">相关推荐</h3>
    <div class="relate-list">
      <AppVideo v-for="item in list" :key="item.vod_id" :item="item" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
img {
  height: 58vm;
  width: 100%;
  display: block;
}
.play-class {
  height:auto;
  display: none;
  #show-iframe {
    background-color:transparent; 
    // position: absolute;
    width: 100%;
    height:58vw; 
    top: 0;left:0;
    bottom:0;
  }
}

img {
    width: 100%;
    height: 58vw;
  }
.video-play {
  width: 100vw;
  height: 100vw;
  object-fit: contain;
  background-color: #fff;
}

.info {
  padding: 10px;
  border-bottom: 1px solid #eee;
  .title-text {
    font-size: 16px;
    font-weight: normal;
  }

  .body {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;
  }

  .author {
    display: flex;
    align-items: center;
    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
    .name {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}

.relate {
  .relate-title {
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    padding: 0 10px;
    color: #333;
  }
  .relate-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
  }
}
</style>
